<titlemenu></titlemenu>
<div class="dj-card">
    <div class="dj-body" activate-input activate-select>
        <div panel-title data-title="'申请信息'"></div>
        <div class="dj-formtable">
            <table class="dj-table">
                <tr>
                    <th>学号/工号</th>
                    <td>
                        {{dataModel.userCode}}
                    </td>
                    <th>姓名</th>
                    <td>
                        {{dataModel.userName}}
                    </td>
                </tr>
                <tr>
                    <th>所属党组织</th>
                    <td colspan="3">
                        {{dataModel.partyName}}
                    </td>
                </tr>
                <tr>
                    <th>性别</th>
                    <td>
                        {{dataModel.sex}}
                    </td>
                    <th>出生年月</th>
                    <td>
                        {{dataModel.birthDate|date:'yyyy-MM-dd'}}
                    </td>
                </tr>
                <tr>
                    <th>籍贯</th>
                    <td>
                        {{dataModel.nativePlace}}
                    </td>
                    <th>民族</th>
                    <td>
                        {{dataModel.national}}
                    </td>
                </tr>
                <tr>
                    <th>身份证号</th>
                    <td>
                        {{dataModel.idCard}}
                    </td>
                    <th>联系电话</th>
                    <td>{{dataModel.contactMobile}}</td>
                </tr>
                <tr>
                    <th>是否学生身份</th>
                    <td>{{dataModel.isStudentName}}</td>
                    <th>学历</th>
                    <td>
                        {{dataModel.educational}}
                    </td>
                </tr>
                <tr>
                    <th>年级</th>
                    <td>
                        {{dataModel.gradeName}}
                    </td>
                    <th>班级</th>
                    <td>
                        {{dataModel.className}}
                    </td>
                </tr>
                <tr>
                    <th>最高学历入学日期</th>
                    <td>
                        {{dataModel.enrollmentDate|date:'yyyy-MM-dd'}}
                    </td>
                    <th>最高学历毕业日期</th>
                    <td>
                        {{dataModel.graduateDate|date:'yyyy-MM-dd'}}
                    </td>
                </tr>
                <tr>
                    <th>入党申请日期</th>
                    <td>
                        {{dataModel.applyDate|date:'yyyy-MM-dd'}}
                    </td>
                    <th></th>
                    <td>

                    </td>
                </tr>
                <tr>
                    <th>入党申请书照片</th>
                    <td colspan="3">
                        <img-component data-filerefid="imgConfig.filerefid" data-filetypeid="imgConfig.filetypeid"
                                       data-ismulti="imgConfig.ismulti" data-height="imgConfig.height"
                                       data-readonly="imgConfig.readonly" data-img-list="imgConfig.imgList"
                                       data-width="imgConfig.width"></img-component>
                    </td>
                </tr>
            </table>
        </div>
        <div panel-title data-title="'申请进度'"></div>
        <div class="progress-content">
            <ul class="progress-list">
                <li style="display: flex;" ng-repeat="it in applyProgressList"
                    ng-class="$last?'feeitem_last':'feeitem'">
                    <div class="progress-icon">
                        <p class="p-top">{{it.passDate | date:'yyyy-MM-dd'}}</p>
                        <img ng-if="it.passDate!=null" src="../../../content/images/fee_yet.svg"/>
                        <img ng-if="it.passDate==null" src="../../../content/images/fee_not.svg"/>
                         <p>{{it.name}}</p>
                    </div>
                    <div class="progress-line" ng-if="!$last"></div>
                </li>
            </ul>
        </div>
    </div>
</div>
<style>
    .progress-content {
        padding: 5px 10px 0 10px;
        margin: 40px;
    }

    .progress-content .progress-list {
        display: flex;
        padding: 0 5px;
    }

    .progress-content .progress-list > li {
        display: flex;
    }

    .progress-content .progress-list .feeitem {
        width: 25%;
        align-items: center;
    }

    .progress-content .progress-list .feeitem_last {
        width: 5%;
    }

    .progress-content .progress-list > li .progress-icon {
        text-align: center;
        position: relative;
    }

    .progress-content .progress-list > li .progress-icon img{
        width: 60px;
        height: 60px;
    }

    .progress-content .progress-list > li .progress-icon p{
        position:absolute;
    }

    .progress-content .progress-list > li .progress-icon .p-top{
        width: 100px;
        margin-bottom: 20px;
        top: -20px;
        left: -20px;
    }

    .progress-content .progress-list > li .progress-line {
        width: 100%;
        height: 2px;
        background: #ddd;
    }
</style>